<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="renderer" content="webkit">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>张洋</title>
    <link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="assets/css/typo.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/index.css">
</head>

<body>

    <header class="header"></header>

    <article class="container">
        <section class="side" id="side">

            <!-- 左栏固定开关，记得及时删除这段代码 Start-->
            <!-- <label class="switch" style="display: none;" onchange="switchFixed()">
                <script type="text/javaScript">
                    function switchFixed(){
                        var value = document.getElementById('side').style.position === 'fixed' ? 'absolute' : 'fixed';
                        document.getElementById('side').style.position = value;
                    }
                </script>
                <input id="cb" type="checkbox">
                <span class="slider round"></span>
            </label> -->
            <style>
                @media (min-width: 750px) {
                    .switch {
                        position: relative;
                        display: inline-block !important;
                        width: 60px;
                        height: 34px;
                    }

                    .switch input {
                        display: none;
                    }

                    .slider {
                        position: absolute;
                        cursor: pointer;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background-color: #ccc;
                        -webkit-transition: .4s;
                        transition: .4s;
                    }

                    .slider:before {
                        position: absolute;
                        content: "";
                        height: 26px;
                        width: 26px;
                        left: 4px;
                        bottom: 4px;
                        background-color: white;
                        -webkit-transition: .4s;
                        transition: .4s;
                    }

                    input:checked+.slider {
                        background-color: #1abc9c;
                    }

                    input:focus+.slider {
                        box-shadow: 0 0 1px #1abc9c;
                    }

                    input:checked+.slider:before {
                        -webkit-transform: translateX(26px);
                        -ms-transform: translateX(26px);
                        transform: translateX(26px);
                    }

                    .slider.round {
                        border-radius: 34px;
                    }

                    .slider.round:before {
                        border-radius: 50%;
                    }
                }
            </style>
            <!-- 个人肖像 -->
            <section class="me">
                <section class="portrait">
                    <img style="display: block;" class="avatar" src="assets/images/avatar.jpg">
                </section>

                <h1 class="name">张洋</h1>
                <h4 class="info-job">2023届 / 云南师范大学</h4>

            </section>

            <!-- 基本信息 -->
            <section class="profile info-unit">
                <h2>
                    <i class="fa fa-user" aria-hidden="true"></i>基本信息
                </h2>
                <hr />
                <ul>
                    <li>
                        <label>个人信息</label>
                        <span>张洋 / 男 / 20岁</span>
                    </li>
                    <li>
                        <label>英语水平</label>
                        <span>CET-6</span>
                    </li>
                    <li>
                        <label>普通话水平</label>
                        <span>二级甲等</span>
                    </li>
                </ul>
            </section>

            <!-- 联系方式 -->
            <section class="contact info-unit">
                <h2>
                    <i class="fa fa-phone" aria-hidden="true"></i>联系方式
                </h2>
                <hr />
                <ul>
                    <li>
                        <label>手机</label>
                        <a href="tel:13187877410" target="_blank">131-8787-7410</a>
                    </li>
                    <li>
                        <label>邮箱</label>
                        <a href="mailto:1252545179@qq.com" target="_blank">1252545179@qq.com</a>
                    </li>
                    <li>
                        <label>Gitee</label>
                        <a href="https://gitee.com/yang-zhang-king" target="_blank">gitee.com/yang-zhang-king</a>
                    </li>
                </ul>
            </section>

            <!-- 技能点 -->
            <section class="skill info-unit">
                <h2>
                    <i class="fa fa-code" aria-hidden="true"></i>技能点
                </h2>
                <hr />
                <ul>
                    <li>
                        <label>HTML</label>
                        <progress value="90" max="100"></progress>
                    </li>
                    <li>
                        <label>ajax && axios</label>
                        <progress value="90" max="100"></progress>
                    </li>
                    <li>
                        <label>CSS</label>
                        <progress value="85" max="100"></progress>
                    </li>
                    <li>
                        <label>JavaScript</label>
                        <progress value="85" max="100"></progress>
                    </li>
                    <li>
                        <label>Vue(2,3)</label>
                        <progress value="80" max="100"></progress>
                    </li>                   
                    <li>
                        <label>git</label>
                        <progress value="70" max="100"></progress>
                    </li>
                    <li>
                        <label>less</label>
                        <progress value="70" max="100"></progress>
                    </li>
                    <li>
                        <label>element-plus</label>
                        <progress value="70" max="100"></progress>
                    </li>
                    <li>
                        <label>React</label>
                        <progress value="30" max="100"></progress>
                    </li>


                </ul>
            </section>

            <!-- 技术栈 -->
            <!-- <div class="stack info-unit">
                    <h2><i class="fa fa-code" aria-hidden="true"></i>其他</h2>
                    <hr/>
                    <ul>
                        <li>
                            <label>前端</label>
                            <span>React、jQuery、微信小程序、Bootstrap、SASS、LESS</span>
                        </li>
                        <li>
                            <label>后端</label>
                            <span>Node.js、MySQL、MongoDB、WordPress、ThinkPHP</span>
                        </li>
                        <li>
                            <label>其他</label>
                            <span>Git、SVN、Markdown</span>
                        </li>
                    </ul>
                </div> -->
        </section>

        <section class="main">

            <!-- 教育经历 -->
            <section class="edu info-unit">
                <h2>
                    <i class="fa fa-graduation-cap" aria-hidden="true"></i>教育经历
                </h2>
                <hr />
                <ul>
                    <li>
                        <h3>
                            <span>云南师范大学 - 计算机科学与技术专业（本科）</span>
                            <time>2019.9-2023.7</time>
                        </h3>
                        <p>专业排名
                            <mark>30/155</mark>
                        </p>
                        <p>获得奖项
                            <mark>CET-6</mark>
                            <mark>百度前端实战训练营优秀学员</mark>
                            <mark>"互联网+"创新创业大赛校级优秀奖,院级一等奖</mark>
                            <mark>2021年第十四届"认证杯"数学中国建模网络挑战赛优秀奖</mark>
                            <mark>普通话二级甲等</mark>
                        </p>
                    </li>
                </ul>
            </section>

            <!-- 项目经验 -->
            <section class="project info-unit">
                <h2>
                    <i class="fa fa-terminal" aria-hidden="true"></i>项目经历
                </h2>
                <hr />
                <ul>
                    <li>
                        <h3>
                            <span>[项目1]Campus SNS校园社区(百度前端进阶班小组项目)</span>
                            <span class="link">
                                <a href="https://campus_back.web.cloudendpoint.cn/#/" target="_blank">Demo</a>
                            </span>
                            <time>2022.2.14-2022.3.7</time>
                        </h3>
                        <ul class="info-content">
                            <li>技术栈：
                                移动端:vue3.0 + vant + axios + router + nanoid + vuex + less + 轻服务<br />
                                PC端 :vue3.0 + axios + nanoid + element-plus + router + less + 轻服务
                            </li>
                            <li>
                                <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
                                [目标]构建一个简单的校园社区，支持多人文字,视频浏览,仅支持移动端效果,PC端作为后台管理。<br />
                                移动端项目地址: https://school_campus.web.cloudendpoint.cn<br />
                                PC端项目地址<mark>(用户名：admin 密码：123456)</mark>:https://campus_back.web.cloudendpoint.cn/#/<br />
                                PC端gitee地址:https://gitee.com/yang-zhang-king/campus-sns_-bms
                                <br />
                                <i class="fa fa-users" aria-hidden="true"></i>
                                [团队]同小组内其他6位同学进行
                                <br />
                                <i class="fa fa-bars" aria-hidden="true"></i>
                                [贡献]完成从
                                <mark>“技术选型-设计-实现-文档”</mark>等工作，主要<mark>负责后台登录、视频审核、用户审核、话题栏</mark>等工作,小组采用了gitee平台进行流程化管理
                                <br />
                                <!-- <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                                [效果]在小范围内测试</li> -->
                        </ul>
                    </li>
                    <li>
                        <h3>
                            <span>[项目2]云管理</span>
                            <span class="link">
                                <a href="https://enterprise.web.cloudendpoint.cn" target="_blank">Demo</a>
                            </span>
                            <time>2022.3.5-持续更新中</time>
                        </h3>
                        <ul class="info-content">
                            <li>技术栈：vue3.0 + vuex + echarts + axios + nanoid + element-plus + router + less + 轻服务</li>
                            <li>
                                <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
                                [目标]实现一个供学生/组织使用的<mark>PC端</mark>的云平台来管理组织项目(包含添加需求、创建项目、邀请成员、查看数据等)
                                <br />
                                <i class="fa fa-users" aria-hidden="true"></i>
                                [团队]个人项目<br />
                                项目地址(<a tagert="_blank" href=" https://enterprise.web.cloudendpoint.cn">
                                    https://enterprise.web.cloudendpoint.cn</a> )<br />
                                仓库链接(<a tagert="_blank" href=" https://gitee.com/yang-zhang-king/enterprise">
                                    https://gitee.com/yang-zhang-king/enterprise</a>)
                                <br />
                                <i class="fa fa-bars" aria-hidden="true"></i>
                                [贡献]分析项目需求，进行需求迭代和阶段性测试，在项目中使用了<mark>vuex</mark>来管理数据，使用了<mark>async和await</mark>来处理异步不同步的问题，使用了<mark>防抖节流</mark>来对用户操作进行控制，对用户操作进行一定的<mark>操作限制</mark>等,同时使用了
                                <mark>ECharts</mark> 进行图形化展示以及实现简易自动分析功能
                                <br />
                                <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                                [效果]在范围内进行了组织测试,经过一些BUG处理后可正常运行,<mark>详情请见md文档</mark>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <h3>
                            <span>[项目3]餐厅游戏</span>
                            <span class="link">
                                <a href="http://yang-zhang-king.gitee.io/game" target="_blank">Demo</a>
                            </span>
                            <time>2022.1.20-2022.1.24</time>
                        </h3>
                        <ul class="info-content">
                            <li>技术栈：HTML+less+JavaScript</li>
                            <li>
                                <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
                                [目标]实现一个<mark>移动端</mark>小游戏,实现顾客进店、点菜、厨师做菜队列、顾客等待队列等效果
                                <br />
                                <i class="fa fa-users" aria-hidden="true"></i>
                                [团队]个人项目 <br />
                                项目地址(<a tagert="_blank" href=" http://yang-zhang-king.gitee.io/game">
                                    http://yang-zhang-king.gitee.io/game</a> )<br />
                                仓库链接(<a tagert="_blank" href=" https://gitee.com/yang-zhang-king/game">
                                    https://gitee.com/yang-zhang-king/game</a>)
                                <br />
                                <i class="fa fa-bars" aria-hidden="true"></i>
                                [实现方式]分析项目需求，将项目拆分为<mark>小模块</mark>,将某些组件封装为一个js文件,在适当时调用,使用setInterval和setTimeout来进行<mark>流程控制</mark>，以实现了较好的效果及体验。
                                <br />
                                <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                                [效果]最终凭借此作品进入了百度前端训练营进阶班
                            </li>
                        </ul>
                    </li>


                </ul>
            </section>

            <!-- 自我评价 -->
            <section class="work info-unit">
                <h2>
                    <i class="fa fa-pencil" aria-hidden="true"></i>自我评价/期望
                </h2>
                <hr />
                <p>本人在校成绩目前属于中上水平，
                    喜欢编程，喜欢羽毛球，乐于探索、思考问题，乐观、
                    积极向上，有着良好的自驱力，能够管
                    控自己，善于利用空余时间学习，从而
                    达到自我提升的目的。
                    在校期间利用空闲时间学习了相
                    关前端方面的知识，喜欢在 CSDN、掘金上了解并学习新的知识。
                    期望在未来工作中不断学习，进步并提升自己的各个方面的能力。
                </p>
            </section>
        </section>
    </article>
</body>

</html>